<template>
  <view class="follow">
    <u-sticky bgColor="#fff">
      <u-tabs
        :list="tabList"
        :current="tabCurrentIndex"
        @click="changeType"
        lineWidth="32rpx"
        lineColor="#FF5900"
        :itemStyle="{ width: 100 / tabList.length + '%', height: '80rpx' }"
        :activeStyle="{
          fontSize: '32rpx',
          fontWeight: '500',
          color: '#1A1A1A',
        }"
      ></u-tabs>
    </u-sticky>
    <swiper
      class="content-box"
      @change="changeTab"
      :current="tabCurrentIndex"
      :duration="300"
      @animationfinish="pullswitch = true"
      @transition="pullswitch = false"
    >
      <swiper-item v-for="(tabItem, tabIndex) in tabList" :key="tabIndex">
        <scroll-view
          @scrolltolower="loadData('add')"
          scroll-y
          class="scroll-view-height"
        >
          <view
            class="cell"
            v-for="(item, index) in tabItem.itemList"
            :key="index"
            @click="goHome(item)"
          >
            <view class="left">
              <u-avatar
                :src="
                  item.avatar
                    ? item.avatar
                    : 'https://res.jiyaqi.com/pet/miniapp/public/user.png'
                "
                :shape="tabIndex == 0 ? 'square' : 'circle'"
                size="96rpx"
              ></u-avatar>
              <view class="left-b">
                <view class="name">{{ item.nickName }}</view>
                <view class="tagBox">
                  <view
                    class="tag"
                    v-if="item.hospitalTypeName || item.position"
                    >{{
                      tabIndex == 0 ? item.hospitalTypeName : item.position
                    }}</view
                  >
                </view>
              </view>
            </view>
            <view class="right" @click.stop="handleFollow(item, index)"
              ><view class="focus">已关注</view></view
            >
          </view>
          <uni-load-more
            v-if="tabItem.itemList.length"
            :status="tabItem.loadingType"
          ></uni-load-more>
          <empty v-if="tabItem.itemList.length == 0"
            ><view class="empty" slot="content">还没有关注哦～</view></empty
          >
        </scroll-view>
      </swiper-item>
      <!-- <swiper-item>
        <scroll-view scroll-y class="scroll-view-height">
          <view class="cell" v-for="(item,index) in hosList" :key="index">
            <view class="left">
              <u-avatar src="" shape="square" size="96rpx"></u-avatar>
              <view class="left-b other">
                <view class="name">{{ item.name }}</view>
                <view class="tag">{{ item.tag }}</view>
              </view>
            </view>
            <view class="right" @click="unFocus(index)">
              <button class="focus">已关注</button>
            </view>
          </view>
          <uni-load-more v-show="!pullLoading" :status="tabItem.loadingType"></uni-load-more>

        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view scroll-y class="scroll-view-height">
          <view class="cell" v-for="(item,index) in doctorList" :key="index">
            <view class="left">
              <u-avatar src="" size="96rpx"></u-avatar>
              <view class="left-b other">
                <view class="name">{{ item.name }}</view>
                <view class="tag">{{ item.tag }}</view>
              </view>
            </view>
            <view class="right" @click="unFocus(index)">
              <button class="focus">已关注</button>
            </view>
          </view>
          <uni-load-more v-show="!pullLoading" :status="tabItem.loadingType"></uni-load-more>
        </scroll-view>
      </swiper-item> -->
    </swiper>
  </view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
import { followListApi, unFollowApi, resetDotFollow } from '@/api/user/user.js'
export default {
  components: { uniLoadMore },
  props: {},
  data() {
    return {
      id: null, // 点击id
      pullswitch: true,
      tabCurrentIndex: 0,
      tabList: [
        // {
        // 	id: 1,
        // 	name: '宠友',
        // 	loadingType: 'more',
        // 	itemList: [],
        // 	pageNum: 1
        // },
        {
          id: 2,
          name: '医院',
          loadingType: 'more',
          itemList: [],
          pageNum: 1,
        },
        {
          id: 3,
          name: '医生',
          loadingType: 'more',
          itemList: [],
          pageNum: 1,
        },
      ],
      // 宠友列表
      friendList: [],
      // 医院列表
      hosList: [],
      // 医生列表
      doctorList: [],
    }
  },
  computed: {},
  mounted() {
    this.loadData()
    resetDotFollow()
  },
  methods: {
    //获取订单列表
    async loadData(type = 'add') {
      //这里是将订单挂载到tab列表下
      let navItem = this.tabList[this.tabCurrentIndex]
      if (type === 'tabChange' && navItem.loaded === true) {
        return //loaded=true代表已经加载过切换tab时无需重新请求
      }
      if (
        navItem.loadingType === 'loading' ||
        navItem.loadingType === 'noMore'
      ) {
        //防止重复加载
        return
      }

      navItem.loadingType = 'loading'
      let params = {
        targetType: this.tabCurrentIndex == 0 ? 3 : 2, // targetType  ==3 医院     targetType  ==2 医院  targetType  ==1 宠友
        pageSize: 10,
        pageEnable: 1,
        pageNum: navItem.pageNum,
      }
      let result = await followListApi(params)
      navItem.pageNum++
      let itemList = result ? result.list : []
      console.log(itemList, '关注列表-------')
      navItem.itemList = [...navItem.itemList, ...itemList]
      //loaded新字段用于表示数据是否已经加载过，如果为空可以显示空白页
      this.$set(navItem, 'loaded', true)
      //判断是否还有数据， 有改为 more， 没有改为noMore
      if (navItem.itemList.length >= result.total)
        navItem.loadingType = 'noMore'
      else navItem.loadingType = 'more'
    },
    changeType(e) {
      this.tabCurrentIndex = e.index
    },
    //触发关注
    handleFollow(item, index) {
      unFollowApi({ targetId: item.targetId })
        .then(res => {
          uni.$u.toast('已取关')
          this.tabList[this.tabCurrentIndex].itemList.splice(index, 1)
        })
        .catch(err => {
          console.log(err, 'err----')
        })
      // this.$emit('handleFollow',true,this.circleObj)
    },
    //swiper 切换
    changeTab(e) {
      this.tabCurrentIndex = e.target.current
      this.loadData('tabChange')
    },
    //取关
    unFocus(index) {
      if (this.tabCurrentIndex == 0) {
        this.friendList.splice(index, 1)
      } else if (this.tabCurrentIndex == 1) {
        this.hosList.splice(index, 1)
      } else {
        this.doctorList.splice(index, 1)
      }
    },
    // 主页
    goHome(item) {
      console.log(this.tabCurrentIndex, '---------------------')
      if (this.tabCurrentIndex == 0) {
        this.toPage(`server/hospital?id=${item.targetId}`)
      } else if (this.tabCurrentIndex == 1) {
        this.toPage(`server/doctor?id=${item.targetId}`)
      }
    },
  },
}
</script>

<style lang="scss">
.scroll-view-height {
  height: calc(100vh - 98rpx);
}
.content-box {
  margin-top: 20rpx;
  height: calc(100vh - 98rpx);
  background-color: #ffffff;
  .list-scroll-content {
    height: 100%;
  }
  .cell {
    position: relative;
    display: flex;
    align-items: center;
    padding: 32rpx 24rpx;
    .left {
      flex: 1;
      display: flex;
      align-items: center;
      &-b {
        margin-left: 24rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1a1a1a;
        .tagBox {
          height: 36rpx;
        }
        .tag {
          display: inline-block;
          padding: 0 12rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 36rpx;
          height: 36rpx;
          background: #f5f5f5;
          border-radius: 6rpx;
        }
      }
    }
    .right {
      .focus {
        text-align: center;
        border: 0px solid #f5f5f5;
        width: 160rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: #f5f5f5;
        border-radius: 32rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #999999;
      }
    }
    &::after {
      content: '';
      left: 152rpx;
      position: absolute;
      bottom: 0;
      width: 100vw;
      height: 1rpx;
      background: #e6e6e6;
      transform: scaleY(0.5);
    }
  }
  .del {
    padding: 0 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ff473d;
    .t {
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }
  }
}
</style>
